<template>
  <div id="tablePanel">
    <div id="searchGroup">
      <el-input
        id="searchCategory"
        placeholder="输入分类检索"
        v-model="searchCategory"
        style="
          float: left;
          width: 220px;
          height: 14px;
          font-size: 13px;
          margin-left: 10px;
        "
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="searchByCategory"
        ></el-button>
      </el-input>
    </div>

    <el-table
      :data="noteList"
      height="590px"
      style="width: 100%; background-color: #ffffff00"
      v-loading="loading"
    >
      <el-table-column
        sortable
        prop="updateTime"
        label="更新日期"
        width="135"
        header-align="center"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="categoryName"
        label="分类"
        width="165"
      >
      </el-table-column>
      <el-table-column prop="title" label="标题">
        <template slot-scope="scope">
          <el-popover
            v-if="scope.row.labels.length > 0"
            placement="top-start"
            trigger="hover"
          >
            <el-tag
              v-for="(item, index) in scope.row.labels"
              :key="index"
              type="info"
              style="margin-right: 2px"
              >{{ item }}</el-tag
            >
            <span slot="reference">{{ scope.row.title }}</span>
          </el-popover>
          <span v-else>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="锁定"
        width="70"
        header-align="center"
        align="center"
      >
        <!-- 使用scope获取行内状态 -->
        <template slot-scope="scope">
          <el-switch
            @change="changeSwitch(scope.row)"
            v-model="scope.row.locked"
            active-color="#ffa501c7"
            inactive-color="#ced1cf"
          >
          </el-switch
          >&nbsp;
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="108"
        header-align="center"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            icon="el-icon-reading"
            circle
            size="mini"
            type="primary"
            @click="viewNote(scope.row.id)"
          ></el-button>
          <el-popconfirm
            icon-color="#40a491"
            @confirm="editNote(scope.row)"
            title="修改这条笔记,确认吗?"
          >
            <el-button
              type="success"
              icon="el-icon-edit"
              circle
              size="mini"
              slot="reference"
            ></el-button>
          </el-popconfirm>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
            @click="deleteNote(scope.row)"
            :disabled="scope.row.locked"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="pager.total"
      :current-page="pager.currentPage"
      @current-change="currentPageChange"
      :hide-on-single-page="hidePager"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from "@/util/AxiosUtil";
import apis from "@/util/ApiUrls";
import { URLS } from "@/router";

export default {
  name: "NotesTableComponent",
  methods: {
    // 切换收藏
    changeSwitch(row) {
      // 直接操作row数据即可获得页面响应
      if (row.locked) {
        // 收藏了-锁定了
        this.loading = true;
        axios
          .put(apis.api_article.lockNote, { id: row.id })
          .then((res) => {
            this.$message({
              message: "已锁定[" + row.title + "] 锁定状态下的笔记不可被删除~",
              duration: 1500,
              type: "success",
            });
          })
          .catch((e) => {
            console.log(e);
            row.locked = false;
            this.$notify({
              title: "警告:锁定笔记失败",
              message: e.msg,
              type: "warning",
              position: "bottom-right",
              duration: 1200,
            });
          })
          .finally(() => {
            this.loading = false;
          });
      } else {
        // 先变成true  不进行操作 - 确认后进行下一步处理
        row.locked = true;
        this.$confirm("解锁后该笔记就可以被删除了,是否确认?", "提示", {
          cancelButtonText: "取消",
          confirmButtonText: "确定",
          type: "warning",
        }).then(() => {
          // 解锁
          row.locked = false;
          axios
            .put(apis.api_article.unLockNote, { id: row.id })
            .then((res) => {
              this.$message({
                message: "已解锁[" + row.title + "] 解锁状态下的笔记可被删除~",
                duration: 1500,
                type: "warning",
              });
            })
            .catch((e) => {
              console.log(e);
              row.locked = true;
              this.$notify({
                title: "警告:解锁笔记失败",
                message: e.msg,
                type: "warning",
                position: "bottom-right",
                duration: 1200,
              });
            })
            .finally(() => {
              this.loading = false;
            });
        });
      }
    },
    // 删除笔记
    deleteNote(row) {
      this.$confirm("将会删除这条笔记,确认吗?", "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          axios
            .delete(apis.api_article.note + "?id=" + row.id)
            .then((res) => {
              this.$message({
                message: "已删除[" + row.title + "]~",
                duration: 1500,
                type: "success",
              });

              // 判断是否需要跳转到上一页
              if (this.noteList.length > 1) {
                // 不请求后台直接删除
                // this.noteList.splice(this.noteList.indexOf(row), 1);
                // 当前页还有数据-直接重新刷新
                this.getTableData();
              } else {
                this.pager.currentPage = this.pager.currentPage - 1;
                if (this.pager.currentPage <= 0) {
                  this.pager.currentPage = 1;
                }
                // 确定页数后重新请求刷新
                this.getTableData();
              }
              // 传递事件-饼图组件监听后刷新数据
              this.$EventBus.$emit("pie_category_changed", undefined);
              this.$EventBus.$emit("table_category_changed", undefined);
            })
            .catch((e) => {
              console.log(e);
              this.$notify({
                title: "警告:删除笔记失败",
                message: e.msg,
                type: "warning",
                position: "bottom-right",
                duration: 1200,
              });
            })
            .finally(() => {
              this.loading = false;
            });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 编辑笔记
    editNote(row) {
      // 进入编辑界面
      this.$router.push({
        path: URLS.edit,
        name: URLS.editName,
        params: {
          id: row.id,
        },
      });
    },
    // 查看笔记
    viewNote(id) {
      this.$router.push({
        path: URLS.view,
        name: URLS.viewName,
        params: {
          id: id,
        },
      });
    },
    // 点击分页组件切换页数触发
    currentPageChange(currentPage) {
      this.pager.currentPage = currentPage;
      this.getTableData();
    },
    // 按分类检索
    searchByCategory() {
      // 检索时回到第一页
      this.pager.currentPage = 1;
      this.getTableData();
    },
    // 获取表格数据
    getTableData() {
      // 请求表格数据
      this.loading = true;
      axios
        .post(apis.api_article.notesTable, {pageIndex: this.pager.currentPage, searchCategory: this.searchCategory})
        .then((res) => {
          // 绑定数据
          this.noteList = res.data.tableRows;
          // 设置分页信息
          this.pager.total = res.data.totalSize;
        })
        .catch((e) => {
          console.log(e);
          this.$notify({
            title: "警告:获取笔记表格数据失败",
            message: e.msg,
            type: "warning",
            position: "bottom-right",
            duration: 1200,
          });
        })
        .finally(() => {
          if (this.noteList.length === 0) {
            // 没数据则隐藏
            this.hidePager = true;
          }
          this.loading = false;
        });
    },
  },
  created() {
    // 初始化获取数据
    this.getTableData();
  },
  data() {
    return {
      searchCategory: "", // 分类检索输入值
      hidePager: false,
      loading: false,
      pager: {
        total: 0,
        currentPage: 1,
      },
      noteList: [],
    };
  },
};
</script>

<style>
#tablePanel .el-button + .el-button {
  margin-left: 2px;
}

#tablePanel .el-table tr {
  background-color: #fff0;
}

#tablePanel .el-table th.el-table__cell {
  background-color: #fff0;
  border-bottom: 2px solid #ead9826b !important;
}

#tablePanel .el-table td.el-table__cell {
  border-bottom: 1px solid #6ac9c74a !important;
}

#tablePanel .el-table thead {
  color: #e357009c;
  font-size: 15px;
}

#tablePanel .el-table {
  color: #000000b8;
  font-size: 14px;
}

#tablePanel .el-table::before {
  height: 0px;
}

#tablePanel .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #3ea491bf;
  color: #fff;
}

#tablePanel .el-pagination.is-background .btn-prev:disabled {
  color: #c7c7c7;
}

#tablePanel input#searchCategory {
  height: 32px;
  background-color: #d0ead7b3;
}

#tablePanel #searchGroup .el-input-group__append {
  background-color: #f6edc2;
}
</style>
